
import './App.css';
import { Component } from "react";

import UseState from "./hookTem/UseState"
import UseEffect from "./hookTem/UseEffect"
import { ThemeContext, themes } from "./components/contextCom"
import {Button,DatePicker} from "antd"

class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            title: "Hook的用法",
            style: {
                textAlign: "center"
            },
            theme: themes.dark
        }
    }
    toggleTheme = () => {
        this.setState(state => ({
            theme:
                state.theme === themes.dark
                    ? themes.light
                    : themes.dark,
        }));
    }
    render() {
        let state = this.state;
        return (
            <div className="box">
                <Button>试用antd</Button>
                <DatePicker></DatePicker>
                <h2 className="title" style={state.style}>{state.title}</h2>
                <ThemeContext.Provider value={this.state.theme}>
                    <UseEffect handleThemeChange={this.toggleTheme}>hook-useEffect用法(它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API)：</UseEffect>
                </ThemeContext.Provider>
                <UseState title="hook-useState用法(setState)："></UseState>

            </div>
        )
    }
}

export default App;

